import React, { memo } from 'react';
import { Row, Col } from 'antd';
import { UserOutlined, MessageOutlined, MoneyCollectOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import style from '../home.module.less';

const HomePanel = () => {
  return (
    <div className={style.card}>
      <Row gutter={24}>
        <Col span={6}>
          <div className={style.card_panel}>
            <div className={style.card_panel_icon}>
              <UserOutlined />
            </div>
            <div className={style.card_panel_description}>
              <p>New Visits</p>
              <p>1230</p>
            </div>
          </div>
        </Col>
        <Col span={6}>
          <div className={style.card_panel}>
            <div className={style.card_panel_icon}>
              <MessageOutlined />
            </div>
            <div className={style.card_panel_description}>
              <p>Messages</p>
              <p>1230</p>
            </div>
          </div>
        </Col>
        <Col span={6}>
          <div className={style.card_panel}>
            <div className={style.card_panel_icon}>
              <MoneyCollectOutlined />
            </div>
            <div className={style.card_panel_description}>
              <p>Purchases</p>
              <p>1230</p>
            </div>
          </div>
        </Col>
        <Col span={6}>
          <div className={style.card_panel}>
            <div className={style.card_panel_icon}>
              <ShoppingCartOutlined />
            </div>
            <div className={style.card_panel_description}>
              <p>Shoppings</p>
              <p>1230</p>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default memo(HomePanel);
